const folderDrag = (eClass) => {
  const folderItem = document.querySelector(`.${elClass} .folder-header`);

  folderItem.addEventListener("mousedown", (e) => {
    const el = document.querySelector(`.${elClass}`);
    window.addEventListener("mousemove", mouseMove);
    window.addEventListener("mouseup", mouseUp);
    let prevX = e.clientX;
    let prevY = e.clientY;
    function mouseMove(e) {
      el.style.opacity = "0.7";
      el.querySelector(".content").style.display = "none";
      let newX = prevX - e.clientX;
      let newY = prevY - e.clientY;
      const rect = el.getBoundingClientRect();
      // rect.left获取元素左边 距离页面左边的距离
      // rect.top获取元素顶部 距离页面顶部的距离
      el.style.left = rect.left - newX + "px"
      el.style.top = rect.top - newY + "px"

      prevX = e.clientX
      prevY = e.clientY
    }
    function mouseUp() {
      el.style.opacity = "1";
      el.querySelector(".content").style.display = "block";
      // 移除监听事件
      window.removeEventListener("mousemove", mouseMove)
      window.removeEventListener("mouseup", mouseUp)
    }
  })
}
export default folderDrag;